<template>
  <div>
    <!--技术状况等级发展情况-->
    <div class="row">
      <div class="col-md-12">
        <div class="box">
          <div class="box-header with-border">
            <h3 class="box-title">技术状况等级发展</h3>
          </div>
          <div class="box-body">
            <div id="evaluationTrendCharts" style="height: 300px;"></div>
          </div>
        </div>
      </div>
    </div>

    <!--桥梁表格-->
    <div class="row">
      <div class="col-md-12">
        <Table
          title="桥梁技术状况等级列表"
          :pageData="pageData"
          searchHint="输入关键字搜索，多个关键字用空格隔开"
          @sizeChange="handleSizeChange"
          @pageTurning="handlePageTurning"
          @sortChange="handleSortChange"
          @filterChange="handleFilterChange"
          @search="handleSearch">
          <!--索引列-->
          <el-table-column type="index" align="center" width="80px"></el-table-column>
          <!--表格主体内容-->
          <el-table-column v-for="col of columns"
                           align="center"
                           :key="col.prop"
                           :prop="col.prop"
                           :label="col.label"
                           :width="col.width"
                           :sortable="col.sortable">
          </el-table-column>
          <!-- 自定义列 -->
          <el-table-column label="最近技术等级" align="center" width="150">
            <template slot-scope="scope">
              <el-tag :type="getBridgeEvaluationColor(scope.row.bridgeEvaluationLevel)" close-transition>
                {{!scope.row.bridgeEvaluationPoint?"暂无评定信息":(scope.row.bridgeEvaluationPoint + " / " + scope.row.bridgeEvaluationLevel)}}
              </el-tag>
            </template>
          </el-table-column>
          <!--操作列-->
          <el-table-column v-if="canView" label="操作" align="center" width="70px">
            <template slot-scope="scope">
              <el-button v-if="canView" size="mini" type="warning" @click="handleView(scope.row)">查看</el-button>
            </template>
          </el-table-column>
        </Table>
      </div>

      <el-dialog :title="currentBridge.name + '技术状况等级评分历史'" v-model="isBridgeEvaluationVisible">
        <div v-loading="loadingBridgeEvaluationTrend" id="bridgeEvaluationTrendCharts" style="height: 300px;"></div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
  import echarts from "../../../echarts"
  import Table from "../bridge/Table.vue"
  import {getEvaluationTrendChartsOptions, getSingleEvaluationTrendChartsOptions} from "../../../assets/js/utils/ViewUtils"
  import {COMPLETE, LOADING} from "../../../store/mutationTypes";
  import {doGet} from "../../../assets/js/utils/RequestUtils";
  import {hasAuthorizedFunction} from "../../../assets/js/global";
  import {VIEW} from "../../../assets/js/enum/FunctionType";
  import {getBridgeEvaluationColor} from "../../../assets/js/utils/EvaluationUtils";

  const DATA_URL = "/decision/evaluationQuery/getEvaluationQueryData";

  const BRIDGE_DATA_URL = "/decision/evaluationQuery/getBridgeEvaluationTrendData";

  export default {
    name:"EvaluationQuery",
    data() {
      return {
        currentBridge:{},
        evaluationTrendCharts:null,
        bridgeEvaluationTrendCharts:null,
        pageData:{
          data:[],
          pageSize:10,
          total:0,
          currentPage:1
        },
        columns:[
          {prop:"name", label:"桥名"},
          {prop:"roadNo", label:"路线号", sortable:"custom"},
          {prop:"bridgeCategoryName", label:"桥梁分类"},
          {prop:"fullAddressName", label:"所在地"},
          {prop:"unitsName", label:"管养单位"},
          {prop:"inspectionDate", label:"最近检查日期"}
        ],
        //根据搜索框输入的内容自动分割
        searchValues:[],
        sortProp:"",
        order:"",
        filter:{prop:"", values:[]},
        //查看单桥历史
        isBridgeEvaluationVisible:false,
        loadingBridgeEvaluationTrend:false
      }
    },
    computed: {
      canView() {
        return hasAuthorizedFunction(this, VIEW);
      }
    },
    methods: {
      initCharts() {
        this.evaluationTrendCharts = echarts.init(document.getElementById("evaluationTrendCharts"));
      },
      handleSizeChange(pageSize) {
        this.pageData.size = pageSize;
        this.fetchData();
      },
      handlePageTurning(index) {
        this.pageData.currentPage = index;
        this.fetchData();
      },
      handleSearch(value) {
        this.searchValues = value.split(" ");
        this.fetchData();
      },
      handleSortChange({column, prop, order}) {
        this.sortProp = prop;
        this.order = order;
        this.fetchData();
      },
      handleFilterChange(filter) {
        this.filter = filter;
        this.fetchData();
      },
      handleView(data) {
        this.currentBridge = data;
        this.isBridgeEvaluationVisible = true;
        this.loadingBridgeEvaluationTrend = true;
        doGet(BRIDGE_DATA_URL, {
          data:{bridgeId:data.id},
          component:this
        }).then(response=>{
          if(!this.bridgeEvaluationTrendCharts) this.bridgeEvaluationTrendCharts = echarts.init(document.getElementById("bridgeEvaluationTrendCharts"));
          this.bridgeEvaluationTrendCharts.setOption(getSingleEvaluationTrendChartsOptions(response));
        }).finally(()=> this.loadingBridgeEvaluationTrend = false);
      },
      fetchData() {
        this.$store.commit(LOADING);
        doGet(DATA_URL, {
          data:{
            pageSize:this.pageData.pageSize,
            currentPage:this.pageData.currentPage,
            searchArray:this.searchValues,
            sortProps:this.sortProp,
            order:this.order
          },
          component:this
        })
          .then(response=>{
            this.pageData = response.bridgePageData;
            this.evaluationTrendCharts.setOption(getEvaluationTrendChartsOptions(response.evaluationTrendChartsDataList));
          })
          .finally(()=>this.$store.commit(COMPLETE))
      },
      getBridgeEvaluationColor
    },
    mounted() {
      this.initCharts();
      this.fetchData();
    },
    components:{Table}
  }
</script>



// WEBPACK FOOTER //
// EvaluationQuery.vue?1924d90c
